<template>
	<div class="qxdd-box">
		<div class="qxdd-cont">
			<div class="qxdd-gb-box"><span @click="downdata()"><img src="../../img-shopXq/icon_close@3x.png"/></span></div>
			<h3 class="qxdd-tshi">您是否确定要取消以下订单？</h3>
			<p>订单号：<span v-text="bianhao"></span></p>
			<h4>取消原因</h4>
			<ul class="qxdd-list">
				<li v-for="(item,index) in listtext" @click="xuanzely(index)"><span v-if="index!=ind"><img src="../../img-address/icon_dis@3x.png"/></span><span v-else><img src="../../img-address/icon_select @3x.png"/></span><span v-text="item"></span></li>
			</ul>
			<div class="queryqxbtn" @click="pushdata()">确定</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'orderqxdd',
		data () {
			return{
				listtext:[],
				ind:0,
				bianhao:0
			}
		},
		props:['msg','biannum'],
		created:function(){
			this.listtext=this.msg;
			this.bianhao=this.biannum;
		},
		methods:{
			xuanzely:function(num){
				this.ind=num;
			},
			pushdata:function(){
				this.$emit('senddata',this.ind);
			},
			downdata:function(){
				var status=true;
				this.$emit('qxsend',status);
			}
		}
	}
</script>

<style>
	.qxdd-box{
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color:rgba(0,0,0,0.4);
		z-index: 9999;
	}
	.qxdd-cont{
		width:6rem;
		background-color:#fff;
		border-radius:0.08rem;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		padding:0.3rem 0.3rem 0 0.74rem;
		box-sizing: border-box;
	}
	.qxdd-gb-box{text-align: right;line-height: 0;margin-bottom: 0.16rem;}
	.qxdd-gb-box>span{display: inline-block;line-height: 0;}
	.qxdd-gb-box img{
		width:0.28rem;
		height:0.28rem;
	}
	.qxdd-tshi{font-size:0.34rem;color:#2B2B2B;line-height: 0.32rem;margin-bottom: 0.3rem;}
	.qxdd-cont>p{font-size:0.28rem;color:#666;line-height: 0.26rem;margin-bottom: 0.51rem;}
	.qxdd-cont>h4{
		font-size:0.28rem;
		color:#666;
		line-height: 0.26rem;
		margin-bottom: 0.34rem;
	}
	.qxdd-list{margin-bottom: 0.35rem;}
	.qxdd-list>li{height:0.32rem;margin-bottom: 0.25rem;}
	.qxdd-list>li>span:nth-child(1),.qxdd-list>li>span:nth-child(2){float:left;margin-right: 0.24rem;}
	.qxdd-list>li>span>img{width:0.32rem;height:0.32rem;}
	.qxdd-list>li>span:last-child{font-size:0.32rem;line-height: 0.3rem;color:#999;}
	.queryqxbtn{width:3.8rem;height:0.7rem;text-align: center;line-height: 0.7rem;background: -webkit-linear-gradient(left, #82c930 , #58b341); background: -o-linear-gradient(right, #82c930, #58b341); background: -moz-linear-gradient(right, #82c930, #58b341);background: linear-gradient(to right, #82c930 , #58b341);border-radius:0.35rem;margin:0 auto;margin-bottom: 0.6rem;font-size:0.28rem;color:#fff;letter-spacing: 0.4rem;padding-left: 0.4rem;box-sizing: border-box;}
</style>